<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
  <div class="app-container">
    <ud-card>
      <div class="myheader">
        <div class="part-left">
          <div class="block">
            <el-radio-group v-model="statusValue" :disabled="listLoading" size="small">
              <el-radio-button v-for="item,i in statusItems" :key="i" :label="item.value">{{ item.name }}</el-radio-button>
            </el-radio-group>
          </div>

          <div class="block">
            <el-input v-model="kw" style="border-radius: 100%; width: 250px" size="small" placeholder="搜索客户姓名、手机号">
              <el-button slot="append" icon="el-icon-search" @click="search_kw = kw" />
            </el-input>
            <el-button v-if="search_kw" type="text" size="small" @click="clearKw">清空</el-button>
          </div>
        </div>

        <div class="part-right">
          <div class="block">
            <el-button size="small" @click="postServerShow = true" icon="el-icon-s-tools" type="primary">案场接待设置</el-button>
          </div>
          <div class="block">
            <el-button size="small" @click="loadData" icon="el-icon-refresh">刷新</el-button>
          </div>
        </div>
      </div>

      <el-dialog title="报备记录" :visible.sync="customerFormVisible" width="800px" :modal="true" :close-on-click-modal="false">
        <report-customer-form :customerId="currentItemId" @change="loadData" @cancle="closeDialog" />
      </el-dialog>

      <el-dialog title="案场接待" :visible.sync="postServerShow" width="500px" :modal="true" :close-on-click-modal="false">
        <PostServer :postId="postId" :btns="btns"></PostServer>
      </el-dialog>

      <el-table v-loading="listLoading" style="width: 100%" :data="items" size="small" element-loading-text="正在加载" fit
        highlight-current-row>
        <el-table-column prop="id" label="#" :width="70" />

        <el-table-column label="进度" :width="80">
          <template slot-scope="scope">
            <el-tag size="mini" effect="plain" :type="stepTextType(scope.row.step)">{{
              stepText(scope.row.step)
            }}</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="name" label="客户姓名" width="120" />

        <el-table-column label="性别" width="80">
          <template slot-scope="scope">
            <span v-if="scope.row.sex == 1">先生</span>
            <span v-if="scope.row.sex == 0">女士</span>
          </template>
        </el-table-column>

        <el-table-column prop="mobile" label="手机号" />
        <el-table-column prop="post_title" label="意向房源" />
        <el-table-column prop="intent" label="意向户型"  />
        <el-table-column label="案场" width="80">
          <template slot-scope="scope">
            {{ scope.row.receiver_name }} {{ scope.row.receiver_mobile }}
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" :width="70" />

        <el-table-column label="报备人" width="160">
          <template slot-scope="scope">
            <div class="broker" v-if="scope.row.source_name && scope.row.source_mobile">
              <span class="name">{{ scope.row.source_name }}
                {{ scope.row.source_mobile }}</span>
            </div>
          </template>
        </el-table-column>

        <el-table-column prop="created_at" label="提交时间" />

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="customerFormHandle(scope.row)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="pager">
        <el-pagination hide-on-single-page background layout="total, sizes, prev, pager, next, jumper" :total="total"
          :page-sizes="[10, 20, 50, 100]" :page-size="per_page" @current-change="updateCurrentPage"
          @size-change="updatePageSize" />
      </div>
    </ud-card>
  </div>
</template>

<style lang="scss" scoped>
.app-container {
  .myheader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0px;

    .part-left {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .block {
        margin-right: 10px;
      }
    }

    .part-right {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .block {
        margin-right: 10px;
      }
    }


    .el-input {
      width: 250px;
      border-radius: 100%;
    }
  }
}
</style>

<script>
import { getReportCustomers } from "@/api/report-customer.js";
import ReportCustomerForm from "./ReportCustomerForm";
import PostServer from "./PostServer";
import UdCard from "@/components/UdCard";
export default {
  components: { ReportCustomerForm, UdCard, PostServer },

  data: function () {
    return {
      statusValue: "",
      statusItems: [
        { name: "全部", value: "" },
        { name: "有效", value: "1" },
        { name: "无效", value: "0" },
      ],
      items: [],
      currentItemId: null,
      customerFormVisible: false,
      postServerShow: false,
      kw: "",
      search_kw: "",
      listLoading: true,
      per_page: 10,
      total: 0,
      current_page: 1,
      postId: null,
    };
  },
  props: {
        btns: { type: Object, default: null },
    },

  watch: {
    statusValue: function (newVal, oldVal) {
      this.loadData();
    },
    current_page: function (newVal, oldVal) {
      this.loadData();
    },
    per_page: function (newVal, oldVal) {
      this.loadData();
    },
    search_kw: function (newVal, oldVal) {
      this.loadData();
    },
  },

  computed: {

  },

  created() {
    var id = this.$route.params.id;
    this.postId = parseInt(id);
    this.loadData();
  },

  mounted() {
    // this.loadData();
  },

  methods: {
    downloadCsv: function () {
      var _this = this;
      var query = { download: true }

    },

    stepText :function (i) {
      switch (i) {
        case 0:
          return "报备";
        case 1:
          return "带看";
        case 2:
          return "认购";
        case 3:
          return "签约";
        case 4:
          return "结佣";
        default:
          return "未知";
      }
    },
    stepTextType: function (i) {
      switch (i) {
        case 0:
          return "primary";
        case 1:
          return "success";
        case 2:
          return "warning";
        case 3:
          return "danger";
        case 4:
          return "info";
        default:
          return "info";
      }
    },

    closeDialog: function () {
      this.currentItemId = null;
      this.customerFormVisible = false;
    },
    customerFormHandle: function (row) {
      this.currentItemId = row.id;
      this.customerFormVisible = true;
    },

    clearKw: function () {
      this.kw = "";
      this.search_kw = "";
    },

    updateCurrentPage: function (page) {
      this.current_page = page;
    },

    updatePageSize: function (size) {
      this.per_page = size || 10;
    },

    loadData: function () {
      this.listLoading = true;
      var _this = this;

      getReportCustomers({
        // order: "id desc",
        post_id: this.postId,
        status: _this.statusValue || "",
        page: _this.current_page,
        per_page: _this.per_page,
        kw: _this.search_kw || "",
      }).then((resp) => {
        _this.items = resp.data.result;
        _this.total = resp.data.page.total_items;
        _this.listLoading = false;
        console.log("resp.data.data", resp.data, _this.listLoading);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  .broker {
    display: flex;
    align-items: center;

    .name {
      margin-left: 10px;
    }
  }
}
</style>
